import React from 'react';
import { connect } from 'dva';
// import { routerRedux } from 'dva/router';
import { createForm } from 'rc-form';
import { Modal, Button, List, InputItem, Toast } from 'antd-mobile';
import SendSmsCode from '../components/SendSmsCode';
import styles from './DoctorsRegisterPage.css';

const alert = Modal.alert;


function DoctorsRegisterPage({ register, dispatch, form, location }) {
  const { getFieldProps, getFieldError, getFieldValue } = form;
  const { registerLoading } = register;
  const { query } = location;
  function onRegister() {
    form.validateFields((error, value) => {
      if (!error) {
        const { password, repassword } = value;
        if (password !== repassword) {
          alert('两次密码不一致，请重新输入!');
          return;
        }
        dispatch({
          type: 'register/register',
          payload: {
            value,
            ...query,
          },
        });
      } else {
        const { mobile: mobileError, validCode: validCodeError, password: passwordError } = error;
        if (mobileError != null) {
          const { errors } = mobileError;
          const { message } = errors[0];
          alert(message);
          return;
        }
        if (validCodeError != null) {
          const { errors } = validCodeError;
          const { message } = errors[0];
          alert(message);
          return;
        }
        if (passwordError != null) {
          const { errors } = passwordError;
          const { message } = errors[0];
          alert(message);
        }
      }
    });
  }
  function onSendSmsCode() {
    if (getFieldError('mobile')) {
      alert('请填写手机号');
      return false;
    }
    dispatch({
      type: 'register/sendSmsCode',
      payload: getFieldValue('mobile'),
    });
    return true;
  }

  return (
    <div className={styles.normal}>
      <div className={styles.title}>手机号注册</div>
      <div className={styles.attention}>注册9K医生医师账号</div>
      <List renderHeader={() => ''}>
        <InputItem
          type="phone" {...getFieldProps('mobile',
            {
              validateTrigger: 'onBlur',
              validateFirst: true,
              rules: [
                { required: true, message: '手机号必填' },
                { pattern: '^1[0-9]{2,2}\\s{1,1}[0-9]{4,4}\\s[0-9]{4,4}$', message: '手机号格式不正确' },
              ],
            })}
          error={!!getFieldError('mobile')}
          onErrorClick={() => { Toast.info(getFieldError('mobile').join(',')); }}
          placeholder="请输入您的手机号"
        >手机号</InputItem>
        <List.Item extra={<SendSmsCode onSendSmsCode={onSendSmsCode} />}>
          <InputItem type="number" {...getFieldProps('validCode', { rules: [{ required: true, message: '请填写验证码' }] })} className={styles.smallInput} placeholder="请输入验证码">验证码</InputItem>
        </List.Item>
        <InputItem
          type="password" {...getFieldProps('password',
            {
              validateTrigger: 'onBlur',
              validateFirst: true,
              rules: [{ required: true, message: '包含0-9数字、大小写字母，位数为6-20位' }, { pattern: '^(?![0-9]+$)[0-9A-Za-z]{6,20}$', message: '密码格式不正确' }],
            },
            )}
          error={!!getFieldError('password')}
          onErrorClick={() => { Toast.info(getFieldError('password').join(',')); }}
          placeholder="包含0-9数字、大小写字母，位数为6-20位"
        >登录密码</InputItem>
        <InputItem
          type="password" {...getFieldProps('repassword')}
          error={getFieldValue('password') !== getFieldValue('repassword')} onErrorClick={() => { Toast.info('登录密码和确认密码不一致'); }} placeholder="请再次输入"
        >确认密码</InputItem>
      </List>
      <div className={styles.subbtn}>
        <Button className="btn" loading={registerLoading} onClick={onRegister} type="primary">提交</Button>
      </div>
    </div>
  );
}

function mapStateToProps({ register }) {
  return { register };
}

export default connect(mapStateToProps)(createForm()(DoctorsRegisterPage));
